<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="name" label="用户名"/>
        <el-table-column fixed="right" label="查看/修改菜单">
            <template #default="scope">
                <div class="m-4">
                    <el-select
                            v-model="scope.row.selectedMenus"
                            multiple
                            placeholder="选择路径"
                            style="width: 240px"
                    >
                        <el-option
                                v-for="item in options"
                                :key="item.name"
                                :label="item.name+'  '+item.path"
                                :value="item.path"
                        />
                    </el-select>
                </div>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
            <template #default="scope">
                <el-button type="danger" plain @click="clearSelect(scope.$index)">清除</el-button>
                <el-button type="success" plain @click="submitSelect(scope.$index)">提交</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
import {getAllMenu, getUserPageListAPI, updateRoleMenu, updateUserAPI} from "@/api/user";

export default {
    name: "权限控制器",
    data() {
        return {
            tableData: [
                {
                    id:2,
                    name: "用户",
                    selectedMenus: [] // 每行独立的选中值
                },
                {
                    id:1,
                    name: "管理员",
                    selectedMenus: [] // 每行独立的选中值
                }
            ],
            options: [
                {
                    path: "路径",
                    name: "路径名称"
                }
            ],
          loading:false//加载状态
        };
    },
    methods: {
        getMenu() {
          this.loading=true;
            getAllMenu({type: "menu"}).then((res) => {
                this.options = res.data.map((item) => ({
                    name: item.name,
                    path: item.path
                }));
            })
                .catch((error) => {
                  this.$message.error("获取菜单数据失败：" + error.message);
                })
                .finally(() => {
                  this.loading = false;
                });
        },
        clearSelect(index) {
            this.tableData[index].selectedMenus = []
        },
        submitSelect(index) {
          console.log(this.tableData[index].selectedMenus)
          const menu =this.tableData[index].selectedMenus;
          const data ={
            roleId:this.tableData[index].id,
            menuList:menu,

          }
          updateRoleMenu(data).then(res=>{
            this.$message({
              type: "success",
              message: "修改成功",
            });
          })

             // TODO 现在添加菜单后，没有带进去菜单名，解决此问题
          // const user = this.tableData[index];
          // this.loading = true;
          // updateUserAPI({ name: user.name, menus: user.selectedMenus })
          //     .then(() => {
          //       this.$message.success("菜单提交成功");
          //     })
          //     .catch((error) => {
          //       this.$message.error("菜单提交失败：" + error.message);
          //     })
          //     .finally(() => {
          //       this.loading = false;
          //     });
        }
    },

    mounted() {
        this.getMenu(); // 获取下拉框的数据
    }
};
</script>

<style scoped>
</style>